<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider collapsible>
      <a-menu theme="dark" mode="inline">
        <a-menu-item key="1" @click="router.push('/home')">
          <pie-chart-outlined />
          <span>主页</span>
        </a-menu-item>

        <a-menu-item key="2" @click="router.push('/user')">
          <span>
            <user-outlined />
            <span>用户信息</span>
          </span>
        </a-menu-item>
        <a-menu-item key="3" @click="router.push('/aero')">
          <span>
            <user-outlined />
            <span>气动数据</span>
          </span>
        </a-menu-item>
        <!-- <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>气动数据</span>
            </span>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu> -->
        <a-menu-item key="4" >
          <file-outlined />
          <span>其他</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!--内容 -->
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-space>
          <div v-if=currentUser>
            <a-avatar style="margin-left: 16px ;" shape="square" :size="50" :src=currentUser.userAvatar>
              <template #icon><UserOutlined /></template>
            </a-avatar> 
          </div>
          <div v-else>
            <!-- 用户登录表单 -->
            <a-button style="margin-left: 16px;"type="primary" @click="userLogVisible=true">登录</a-button>
            <a-modal
              v-model:open="userLogVisible"
              title="用户登录"
              ok-text="登录"
              cancel-text="取消"
              @ok="userLogin"
            >
              <a-form ref="formRef" layout="vertical" name="form_in_modal">
                <a-form-item
                  label="账号"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="userAccount">
                    <template #prefix>
                      <UserOutlined class="site-form-item-icon" />
                    </template>
                  </a-input>
                </a-form-item>

                <a-form-item
                  label="密码"
                  :rules="[{ required: true, message: 'Please input your password!' }]"
                >
                  <a-input-password v-model:value="userPassword">
                    <template #prefix>
                      <LockOutlined class="site-form-item-icon" />
                    </template>
                  </a-input-password>
                </a-form-item>
              </a-form>
            </a-modal>
            <!-- 用户注册表单 -->
            <a-button style="margin-left: 16px;" @click="userRegisterVisible=true">注册</a-button>
            <a-modal
              v-model:open="userRegisterVisible"
              title="用户登录"
              ok-text="注册"
              cancel-text="取消"
              @ok="userRegister"
            >
              <a-form ref="formRef" layout="vertical" name="form_in_modal">
                <a-form-item
                  label="账号"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="userRegisterAccount">
                    <template #prefix>
                      <UserOutlined class="site-form-item-icon" />
                    </template>
                  </a-input>
                </a-form-item>

                <a-form-item
                  label="密码"
                  :rules="[{ required: true, message: 'Please input your password!' }]"
                >
                  <a-input-password v-model:value="userRegisterPassword">
                    <template #prefix>
                      <LockOutlined class="site-form-item-icon" />
                    </template>
                  </a-input-password>
                </a-form-item>
                <a-form-item
                    label="二次输入密码"
                    :rules="[{ required: true, message: 'Please input your password!' }]"
                  >
                    <a-input-password v-model:value="checkPassword">
                      <template #prefix>
                        <LockOutlined class="site-form-item-icon" />
                      </template>
                    </a-input-password>
                  </a-form-item>
              </a-form>
            </a-modal>
          </div>
        </a-space>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
         
        </a-breadcrumb>
        <div :style="{ padding: '24px', background: '#ececdee', minHeight: '600px' }">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        SWUST ©2024 Created by Wangxiabin
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  LockOutlined
} from '@ant-design/icons-vue';
import { ref ,onMounted} from 'vue';
import {useRouter,useRoute }from 'vue-router'
import axios from './config/axios.ts'
import { message } from 'ant-design-vue';

const route = useRoute()
const router = useRouter()
const currentUser = ref()
const userLogVisible = ref(false)
const userRegisterVisible = ref(false)


onMounted(()=>{
  getLoginUser()
})
//获取当前用户
const getLoginUser =async()=>{
  const reslut = await axios.get("/user/get/login")
  currentUser.value = reslut.data.data
}

//用户登录
const userAccount = ref()
const userPassword = ref()
const userLogin = async()=>{
  const result = await axios.post("/user/login",{
    userAccount:userAccount.value,
    userPassword:userPassword.value
  })
  if(result.data.code === 0 ){
    message.success("登录成功")
    userLogVisible.value = false
    location.reload()
  }else{
    message.error("登录失败")
  }
}

//用户注册
const userRegisterAccount = ref()
const userRegisterPassword = ref()
const checkPassword = ref()
const userRegister = async()=>{
  const result = await axios.post("/user/register",{
    userAccount:userRegisterAccount.value,
    userPassword:userRegisterPassword.value,
    checkPassword:checkPassword.value
  })
  if(result.data.code === 0){
    message.success("注册成功，请登录")
    userRegisterVisible.value = false
    location.reload()
  }else{
    message.error("注册失败")
  }
}


</script>

<style scoped>

</style>
